<template>
  <div class='container'>
 <!-- 头部区域 -->
<el-card  shadow="never">
  <!-- <div slot="header" class="header"> -->
 <el-form :inline="true" :model="requestParameters" ref="requestParameters" class="head">
     <el-form-item label="学科名称" class="header-left" prop="subjectName">
    <el-input  @keyup.enter="handleFilter" placeholder="" style="width: 180px;"   v-model="requestParameters.subjectName"></el-input>
     <el-button size="small"  @click="resetForm" style="margin-left:10px">清除</el-button>
     <el-button type="primary" size="small"  @click="handleFilter">搜索</el-button>
  </el-form-item>
    <el-form-item class="header-right" >
    <el-button size="small" type="success"   @click="handleChange('add')" icon="el-icon-edit" style="margin-left: 10px;">新增学科</el-button>
    </el-form-item>
</el-form>
  <!-- </div> -->
  <!-- 记录总数 -->                    
 <el-alert
          v-if="alertText !== ''"
          :title="alertText"
          type="info"
          class="alert"
          :closable="false"
          show-icon
          style="margin-bottom: 15px;"
        ></el-alert>


<!-- 表格内容 -->
          <!-- :key="tableKey" -->

    <el-table
     :key="tableKey"
          :data="dataList"
          v-loading="listLoading"
          element-loading-text="给我一点时间"
          fit
          highlight-current-row
          style="width: 100%,margin-top:30px"
         
        >
          <el-table-column align="center" label="序号" type="index" >
            
          </el-table-column>
          <el-table-column align="center" label="学科名称" class="backColor">
            <template v-slot="{row}">
              <span>{{row.subjectName}}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" label="创建者">
            <template v-slot="{row}">
              <span>{{row.username}}</span>
            </template>
          </el-table-column>
          <el-table-column label="创建日期">
            <template v-slot="{row}">
              <span>{{row.addDate | parseTimeByString("{y}-{m}-{d} {h}:{i}:{s}")}}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" label="前台是否显示">
            <template v-slot="{row}">
                <span v-if="row.isFrontDisplay==1">是</span>
              <span v-else>否</span>
            </template>
          </el-table-column>
          <el-table-column align="center" label="二级目录">
            <template v-slot="{row}">
              <span>{{row.twoLevelDirectory}}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" label="标签">
            <template v-slot="{row}">
              <span>{{row.tags}}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" label="题目数量">
            <template v-slot="{row}">
              <span>{{row.totals}}</span>
              
            </template>
          </el-table-column>
          <!-- 操作按钮 -->
          <el-table-column
            align="center"
            label="操作"
            width="280"
            class-name="small-padding fixed-width" 
          >
           <!-- v-slot="{row}" -->
            <template v-slot="{row}">
<el-button type="text" @click="replacePageOne">学科分类</el-button>
<el-button type="text" @click="replacePageTwo">学科标签</el-button>
<el-button type="text" @click="handleChange(row.id)">修改</el-button>
<el-button type="text" @click="removeSubject(row.id)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
<!-- 分页 -->
<div class="pagination">
          <div class="pages">
            <el-pagination
              background
              @size-change="pageSizeNum"
              @current-change="CurrentChange"
              :current-page="Number(requestParameters.page)"
              :total="Number(total)"
              :page-size="Number(requestParameters.pagesize)"
              layout=" prev, pager,sizes, next, jumper"
                :page-sizes="[10,20,30, 50]"
            ></el-pagination>
          </div>
        </div>
<!-- 修改弹层 -->
<Dialog ref="editSubject" :titleInfo="titleInfo" :formBase="formData" v-on:newDataes="getSubjectsList"></Dialog>

</el-card>
</div>
</template>

<script>
import {list,detail,add,update,remove} from '../../api/hmmm/subjects.js'
import Dialog from './../components/subjects-add'
export default {
  name:'SubjectsList',
  components:{
Dialog
  },

data() {
  return {
     tableKey: 0,
      alertText: '',
      dataList:[],
      total:null,
      listLoading:false,
      requestParameters:{
        page:'',
        pagesize:''
      },
      titleInfo: {
        pageTitle: '学科', // 页面标题
        text: '' // 新增、编辑文本
      },
      formData: {
        id:'',
        subjectName: '',
        isFrontDisplay:null,
        // isShow: true,
      },
  }
},
created() {
  this.getSubjectsList()
  this.initialDate()
},
methods: {
// 初始数据
    initialDate () {
      // 读取数据
      this.getSubjectsList()
    },
  // 获取列表数据
async getSubjectsList(){
this.loading = true
const{data:res}= await list(this. requestParameters)
// console.log(counts);
// console.log(res);
// 获取数据给dataList
this.dataList = res.items
// 获取总条数
this.total = res.counts
this.alertText =`共${this.total}条数据`
this.listLoading = false
},
 // 清除
    resetForm () {
      this.$refs.requestParameters.resetFields()
    },
  // 搜索信息
    handleFilter () {
      this.requestParameters.page = 1
      this.getSubjectsList(this.requestParameters)
    },
// 每页显示信息条数
pageSizeNum(val) {
  this.requestParameters.pagesize = val
  if(this.requestParameters.page ===1){
    this.getSubjectsList(this.requestParameters)
  }
},
// 进入某一页
CurrentChange(val){
  this.requestParameters.page = val
  this.getSubjectsList()
},
// 添加、编辑之后表单清空
   query () {
      this.formData = {}
    },

// 新增和修改
handleChange(id){
  this.query()
   this.$refs.editSubject.dialogFormV()
if(id === 'add') {
this.titleInfo.text ="新增"  // 给弹层传参
}else{
  this.titleInfo.text ="修改"  // 给弹层传参
  this.hanldeEditForm(id)
}
},
// 点击页面跳转
replacePageOne(){
 this.$router.push("directorys")
},
replacePageTwo(){
  this.$router.push("tags")
},
// 编辑，表单详情数据加载
async hanldeEditForm (objeditId){
  this.formData.id = objeditId
  const{data:res} = await detail({id: objeditId})
  // 获取详情给formData
  this.formData =res
  // console.log(this.formData);
},
// 删除
removeSubject (subject) {
      this.$confirm('此操作将永久删除该学科 ' + ', 是否继续?', '提示', {
        type: 'warning'
      })
        .then(async () => {
          await remove({ id: subject })
            .then(response => {
              this.$message.success('删除成功')
              // this.dataList.splice(subject, 1)
              this.getSubjectsList(this.requestParameters)
            })
            .catch(response => {
              this.$message.error('删除失败!')
            })
        })
        .catch(() => {
          this.$message.info('已取消操作!')
        })
    }

},
  // 创建完毕状态
  created () {
    var _this = this
    this.initialDate()
    // 键盘enter操作
    document.onkeydown = function (e) {
      var key = window.event.keyCode
      if (key === 13) {
        _this.handleFilter(this.requestParameters)
      }
    }
  },


}
</script>

<style scoped lang='less'>
.head {
  display: flex;
  justify-content: space-between;
}
.el-input--medium .el-input__inner {
  height: 31px !important;
  line-height: 36px;
}
.pagination {
  display: flex;
  justify-content: flex-end;
  margin-top: 20px;
}

.el-table th.el-table__cell {
  background-color: pink;
}
</style>
